require('../css/commCss/normalize.css')
require('../css/commCss/reset.css')
require('../css/commCss/property.css')
require('../css/commCss/basic.css')
require('../libs/iconfont/iconfont.css')
require('../css/sportsCourseTraining.less')

const utilButtomNav = require('../util/util')

const axios = require('axios')

document.addEventListener('DOMContentLoaded', function () {
    const serUrl = 'http://139.9.177.51:8099'

    //引入组件
    utilButtomNav.ButtomNav('sports', '-courseTraining')

    //渲染数据
    axios.get(serUrl + '/sports/allcourse').then(function (res) {
        let courseData = res.data.data
        let newCourse = courseData.filter(function (item) {
            return item.latest == 1
        })
        let courses = courseData.filter(function (item) {
            return item.latest == 0
        })
        //渲染最新课程
        document.querySelector('#imgurl').src = serUrl + newCourse[0].imgurl;
        document.querySelector('#name').textContent = newCourse[0].name;
        document.querySelector('#desc').textContent = newCourse[0].desc;
        document.querySelector('#newCourse').dataset['cid'] = newCourse[0].courseId


        //渲染所有课程
        document.querySelector("#courses").innerHTML = courses.map(function (item) {
            return `
            <div style="background-image:url('${serUrl + item.imgurl}')" data-cid="${item.courseId}">
                <p>${item.name}</p>
                <p>${item.desc}</p>
            </div>
            `
        }).join("")
    })

    /*
    *点击查看详情页面
    */
    //最新课程传参
    document.querySelector('#newCourse').addEventListener('click', function () {
        let cid = this.dataset['cid']
        sessionStorage.cid = cid;
        location.href = './sportsDetail.html'
    })
    document.querySelector("#courses").addEventListener('click', function (e) {
        let x = e.target
        let cid = x.closest('div').dataset['cid']
        if (cid) {
            sessionStorage.cid = cid;
            location.href = './sportsDetail.html'
        }

        console.log(cid);
    })

})